<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 导入 channel store
import { useChannelStore } from '../store/channel'
import axios from 'axios';
import type { ChannelItem, ChannelResData } from '../types/data';

// 创建store实例
const channelStore = useChannelStore()

// 定义页面数据容器
const channels = ref<ChannelItem[]>([]);

// 组件默认选中的频道
// defineProps<{ channelId: number }>();

// 向父组件传递选中的频道id
// const emits = defineEmits<{
//   (e: 'changeChannel', id: number): void;
// }>();

// 页面加载完毕后发起请求
onMounted(async () => {
  const res = await axios.get<ChannelResData>(
    'http://geek.itheima.net/v1_0/channels'
  );
  // 赋值给页面
  console.log(res.data.data.channels);
  channels.value = res.data.data.channels;
});
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === channelStore.channelId }"
        href="javascript:;"
        v-for="(item, i) in channels"
        :key="item.id"
        @click="channelStore.changeChannel(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
